<!-- tabbar -- 接单页面 -->
<template>
	<view class="content">
		<!-- 引入头部 -->
		<Header :num="num"></Header>
		<!-- 选择城市 -->
		<view class="citySelect">
			<span class="city">
				<text :class="{up:upOrDown===1}">{{placeName}}</text>
				<u-icon name="arrow-up" color="#562fe2" v-if="upOrDown===1" @click="select(1)"></u-icon>
				<u-icon name="arrow-down" color="#b4b3b8" v-else  @click="select(1)"></u-icon>
				
			</span>
			<span class="city">
				<text :class="{up:upOrDown===2}">{{cityName}}</text>
				<u-icon name="arrow-up" color="#562fe2"  v-if="upOrDown===2" @click="select(2)"></u-icon>
				<u-icon name="arrow-down" color="#b4b3b8" v-else @click="select(2)"></u-icon>
				
			</span>
			<span class="city">
				<text :class="{up:upOrDown===3}">按距离由近到远</text>
				<u-icon name="arrow-up" color="#562fe2"  v-if="upOrDown===3" @click="select(3)"></u-icon>
				<u-icon name="arrow-down" color="#b4b3b8" v-else @click="select(3)"></u-icon>
				
			</span>
		</view>
		<!-- 选择地点 -->
		<view class="placeSelect citySelect">
			<span class="place city">
				<text :class="{up:upOrDown===4}">装货地</text>
				<u-icon name="arrow-up" color="#562fe2"  v-if="upOrDown===4" @click="select(4)"></u-icon>
				<u-icon name="arrow-down" color="#b4b3b8" v-else @click="select(4)"></u-icon>
			</span>
			<span class="place city">
				<text :class="{up:upOrDown===5}">卸货地</text>
				<u-icon name="arrow-up" color="#562fe2"  v-if="upOrDown===5" @click="select(5)"></u-icon>
				<u-icon name="arrow-down" color="#b4b3b8" v-else @click="select(5)"></u-icon>
			</span>
			<span class="place city">
				<text :class="{up:upOrDown===6}">货主</text>
				<u-icon name="arrow-up" color="#562fe2"  v-if="upOrDown===6" @click="select(6)"></u-icon>
				<u-icon name="arrow-down" color="#b4b3b8" v-else @click="select(6)"></u-icon>
			</span>
			<span class="place city">
				<text :class="{up:upOrDown===7}">车型</text>
				<u-icon name="arrow-up" color="#562fe2"  v-if="upOrDown===7" @click="select(7)"></u-icon>
				<u-icon name="arrow-down" color="#b4b3b8" v-else @click="select(7)"></u-icon>
			</span>
		</view>
		
		<!-- 选择城市时弹出的选择框 -->
		<view class="move" :style="{transform: moveTransform,transition: moveTransition}">
			<!-- 选择区发货地 -->
			<view class="Allcity" v-if="upOrDown===1">
				<view class="history"  v-if="historySendList.length">
					<text>历史选择</text>
					<view class="historySelect">
						<span  v-for="history in historySendList" :key="history">{{history}}</span>
					</view>
				</view>
				<view class="place">
					<view class="title">
						<text>选择发货地</text>
						<text @click="back">返回上一级</text>
					</view>
					<span :class="{selected:nav===item}" @click=selectCtiy(item) v-for="item in showList" :key="item">{{item}}</span>
				</view>
			</view>
			<!-- 选择城市到达地 -->
			<view class="Allcity" v-if="upOrDown===2">
				<view class="history"  v-if="historyToList.length">
					<text>历史选择</text>
					<view class="historySelect">
						<span  v-for="history in historyToList" :key="history">{{history}}</span>
					</view>
				</view>
				<view class="place">
					<view class="title">
						<text>选择到达地</text>
						<text @click="back">返回上一级</text>
					</view>
					<span :class="{selected:navC===city}" @click=selectCtiy(city) v-for="city in showCityList" :key="city">{{city}}</span>
				</view>
			</view>
			<!-- 选择距离 -->
			<view class="distance" v-if="upOrDown===3">
				<div class="distanceSelected">按装货距离由近到远排序</div>
				<div>按运费由高到低排序</div>
			</view>
			<!-- 装货地-->
			<view class="fromOrTo" v-if="upOrDown===4">
				<div class="selectButton">
					<button class="uButton">重置</button>
					<button type="primary" class="uButton" color="#532fe6">确定</button>
				</div>
			</view>
			<!-- 卸货地 -->
			<view class="fromOrTo" v-if="upOrDown===5">
				<div class="selectButton">
					<button class="uButton">重置</button>
					<button type="primary" class="uButton" color="#532fe6">确定</button>
				</div>
			</view>
			<!-- 货主 -->
			<view class="owner fromOrTo" v-if="upOrDown===6">
				<div class="selectButton">
					<button class="uButton">重置</button>
					<button type="primary" class="uButton" color="#532fe6">确定</button>
				</div>
				
			</view>
			<!-- 车型 -->
			<view class="carType fromOrTo" v-if="upOrDown===7">
				<div class="car">
					<text class="carSelect" v-for="item in carTypeList">{{item}}</text>
					<!-- <text class="carSelect">不限车型</text> -->
				</div>
				<div class="selectButton">
					<button class="uButton">重置</button>
					<button type="primary" class="uButton">确定</button>
				</div>
			</view>
		</view>
		
		<!-- 当选择的每没有内容时 -->
		<view class="null" v-if="noneList">
			<image src="../../static/images/null.jpg" />
			<div class="desc">
				<text>暂时没有更多货源了</text>
				<text>等会再来看看吧</text>
			</div>
			<button class="refresh"  shape="circle">刷新货源</button>
		</view>
		
		
		<view class="main" v-if="upOrDown===0">
			<!-- 轮播图 -->
			<view class="wrap">
				<u-swiper :list="list"></u-swiper>
			</view>
			<!-- 货源列表 -->
					<view class="goodsOriginList">
						<view class="goodsOriginItem" @click="modalIsShow=true" v-for="(orderItem,index) in orderList" :key="index">
							<view class="top">
								<text class="title">{{orderItem.type}}</text>
								<text class="method">{{orderItem.price}}</text>
								<text class="time">{{orderItem.time}}</text>
							</view>
							<view class="goodsOringinMain">
								<view class="mainLeft">
									<text class="from">装</text>
									<i></i>
									<text class="to">卸</text>
								</view>
								<view class="mainCenter">
									<text class="fromCity">{{placeName}}</text>
									<text class="toCity">{{cityName}}</text>
								</view>
								<view class="mainRight">
									<i class="left"></i>
									<i class="right"></i>
									<view class="btn">
										<u-icon class="phone" name="phone-fill" size="50rpx"></u-icon>
									</view>
								</view>
							</view>
							<view class="bottom">
								<text>{{placeName}}->{{cityName}}，{{orderItem.desc}}</text>
							</view>
						</view>
					</view>

			<!-- 弹窗 -->
					<u-modal v-model="modalIsShow" :show-cancel-button="true"
						:show-title="false" @confirm="toContract"
						confirm-text="马上认证" cancel-text="暂不认证" 
						confirm-color="#6342E8" cancel-color="#6342E8">
						<view class="slot-content">
							<view v-if="modalIsShow">
								<rich-text :nodes="modalContent"></rich-text>
							</view>
						</view>
					</u-modal>

			<!-- 底部导航 -->
			<u-tabbar :list="tabbar"></u-tabbar>
		</view>
	</view>
</template>

<script>
import Header from '../components/Header/Header'
import { mapGetters } from "vuex";
import {city,getOrderList} from '../../api/index.js'

export default {
	components:{
		Header
	},
	data() {
		return {
			list: [
				{
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				},
			],
			show: true, //
			modalIsShow: false, //模态框是否显示
			modalContent:`<img src="../../static/03.png" style="width:100%"/>`,
			upOrDown:0,//箭头头上下
			sendOrArrive:1,//发货地或送达地
			Allselected:5,//控制弹出框不同的显示内容  1-北京/全国  2-距离  3-装货地/卸货地  4-货主 5-车型
			moveTransform:"translateY(-450px)",
			moveTransition:"",
			noneList:false,//没有资源时
			num:'',//存储header传过来的选择高亮的标识
			historySendList:[],//存储发货地历史记录
			historyToList:[],//存储到达地历史记录
			cityList:[],//全国城市列表
			placeList:[],//城市区列表
			carTypeList:[],//车型列表
			nav:"全市",//区的高亮标识
			navC:"全国",//城市的高亮标识
			cityName:"全国",//选中的城市
			placeName:"北京",//选中的区
			showList:[],//展示地区的数组
			showCityList:[],//展示城市的数组
			showMain:true,//轮播页的显示与隐藏
			orderList:[]//存储订单列表

			
		};
	},
	computed: {
	    ...mapGetters([
	      'tabbar'
	    ])
	},

	onLoad(num){
		// 接受header传过来的控制高亮的参数
		this.num = num.selected
		this.getOrderListData()
	},
	mounted() {
		this.getCity()
		this.getHistory()
	},
	methods: {
		// 获取城市数据
		async getCity(){
			const cityData = await city()
			if(cityData.errno === 0){
				const {beiJing,carType,cities} = cityData.data
				this.cityList = cities
				this.showCityList = cities
				this.showList = beiJing
				this.placeList = beiJing
				this.carTypeList = carType
			}else{
				uni.showToast({
					title:"获取城市数据失败"
				})
			}
			
		},
		// 点击箭头
		select(num){
			// 隐藏轮播页
			// this.showMain = false
				if(this.upOrDown === num){
					this.moveTransform = "translateY(-450px);"
					this.moveTransition =  "all 0.3s linear;"
					this.upOrDown = 0
				}else{
					this.moveTransform = num >=3 ? "translateY(-5px);" : "translateY(-40px);"
					this.moveTransition =  "all 0.3s linear;"
					this.upOrDown = num
				}
			},
		// 选择城市发货地到达地
		// 选择装货地和送达地
		selectCtiy(city){
			const {historySendList,historyToList} = this
			if(this.upOrDown===1){
				const flag = this.showList.some(item=>item===this.nav)
				this.nav = flag?city:"全市"
				// this.nav = ""
				// this.nav = city
				this.showList = this.placeList
				this.placeName = city
				// 历史记录
				if(historySendList.indexOf(city) !==-1){
				      historySendList.splice(historySendList.indexOf(city),1)
				    }
				// 插入数组
				historySendList.unshift(city)
				this.historySendList = historySendList
				// 缓存
				wx.setStorageSync('historySendList', JSON.stringify(historySendList))
			}else if(this.upOrDown===2){
				this.showCityList = this.placeList
				const flag = this.showCityList.some(item=>item===this.navC)
				this.navC = flag?city:"全市"
				// this.navC = ''
				// this.navC = city
				
				this.cityName = city
				// 历史记录
				if(historyToList.indexOf(city) !==-1){
				      historyToList.splice(historyToList.indexOf(city),1)
				    }
				// 插入数组
				historyToList.unshift(city)
				this.historyToList = historyToList
				// 缓存
				wx.setStorageSync('historyToList', JSON.stringify(historyToList))
			}
			
			
		},
		// 获取历史记录
		getHistory() {
			const historySendList = JSON.parse(wx.getStorageSync('historySendList'))
			if (historySendList) {
			  this.historySendList = historySendList
			}
			const historyToList = JSON.parse(wx.getStorageSync('historyToList'))
			if (historyToList) {
			  this.historyToList = historyToList
			}
			
		},
		// 返回上一级
		back(){
			if(this.upOrDown === 1){
				this.showList =  this.cityList.slice(1,)
			}else if(this.upOrDown === 2){
				this.showCityList = this.cityList
			}
		},	
		// 获取订单列表
		async getOrderListData(){
					const result =await getOrderList()
					this.orderList = result.data.orderList
				},
		// 跳转到合同页面
		toContract(){
				wx.reLaunch({
						url:"/pages/personal/components/contract"
				})
		}

		
	}


};
</script>

<style lang="scss" scoped>
	.citySelect{
		display: flex;
		justify-content: space-between;
		margin: 15px 10px 15px 10px;
		.city{
			font-size: 14px;
			text{
				margin-right: 5px;
			}
			// 城市或地点被选中的样式
			.up{
				color: #562fe2;
			}
		}
	}
	// 选择城市时弹出的选择框
	.move{
		height: 100%;
		background: #FFFFFF;
		.Allcity{
			// height: 350px;
			background: #fff;
			padding: 15px 10px 0 10px;
			text{
				display: block;
				font-size: 18px;
				color: #b4b3b8;
				font-weight: 400;
				margin: 10px 0;
			}
			span{
				display: inline-block;
				border: 1px solid #b4b3b8;
				width: 90px;
				height: 38px;
				text-align: center;
				line-height: 38px;
				font-size: 14px;
				margin-right: 5px;
				margin-bottom: 5px;
			}
			// 选择发货地
			.place{
				.title{
					display: flex;
					justify-content: space-between;
					>text:nth-child(2){
						color: blue;
					}
				}
			}
			.selected{
				border-color: blue;
				background-color: #f2effd;
			}
		}
	}
	
	// 选择地点
	.placeSelect{
		// height: 350px;
		background: #fff;
		height: 25px;
		line-height: 25px;
		background-color: #f2f2f4;
	}
	// 选择距离
	.distance{
		// height: 350px;
		background: #fff;
		div{
			border-bottom: 1px solid #dedee2;
			font-size: 14px;
			padding: 15px 0;
		}
		.distanceSelected{
			color: blue;
			
		}
	}
	// 装货地卸货地
	.fromOrTo{
		// height: 350px;
		background: #fff;
		// display: flex;
		// justify-content: space-between;
		// height: 100%;
		// 弹框中的按钮
		.selectButton{
			padding: 200px 10px 0 5px;
			width: 100%;
			display: flex;
			justify-content: space-between;
			.uButton{
					// margin-top: 400px;
					width: 200px;
					margin-right: 10px;
				}
				.uButton+.uButton{
						background-color:#532fe6;
					}
		}
	}
	// 车型
	.carType{
		// height: 350px;
		background: #fff;
		.car{
			padding: 20px;
			.carSelect{
				display: inline-block;
				background: #f7f7fa;
				width: 100px;
				height: 35px;
				text-align: center;
				line-height: 35px;
				font-size: 10px;
				border-radius: 4px;
				margin-right: 15px;
				
			}
		}
	}
	// 没有货源
	.null{
		height: 100%;
		width: 100%;
		image{
			display: block;
			width: 100px;
			height: 150px;
			text-align: center;
			margin: 50px  auto;
			margin-bottom: 0;
		}
		.desc{
			margin: 25 auto;
			margin-left: 125px;
			margin-bottom: 25px;
			margin-top: 25px;
			text{
				display: block;
				font-size: 14px;
				color: #b4b3b8;
			}
			>text:nth-child(2){
				margin-left: 15px;
			}
		}
		.refresh{
			width:150px ;
			height: 45px;
			// border-radius: 10%;
			border-color: blue;
			color:blue ;
		}
		
	}
	
	
	
	.wrap {
		margin-top: 20rpx;
		}
	.goodsOriginList{
		margin-top: 20rpx;
		.goodsOriginItem{
			height: 320rpx;
			background-color: #fff;
			border-radius: 20rpx;
			margin: 30rpx;
			padding: 20rpx 20rpx;
			.top{
				.title{
					font-size: 42rpx;
				}
				.method{
					margin-left: 80rpx;
					font-size: 30rpx;
					color: blue;
				}
				.time{
					float: right;
					margin-right: 20rpx;
					font-size: 24rpx;
					color: #bbb;
				}
			}
			.goodsOringinMain{
				margin:20rpx;
				margin-bottom: 0;
				height: 130rpx;
				.mainLeft{
					float: left;
					display: flex;
					flex-direction: column;
					justify-items: center;
					.from{
						background-color: pink;
						font-size: 25rpx;
						line-height: 35rpx;
						width: 35rpx;
						text-align: center;
						color: #fff;
						border-radius: 50%;
					}
					i{
						display: inline-block;
						height: 20rpx;
						width: 3rpx;
						background: #C0C0C0;
						margin: 10rpx;
						margin-left: 15rpx;
					}
					.to{
						background-color: skyblue;
						color: #fff;
						border-radius: 50%;
						font-size: 25rpx;
						line-height: 35rpx;
						width: 35rpx;
						text-align: center;
					}
				}
				.mainCenter{
					float: left;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					.fromCity{
						font-size: 35rpx;
					}
					.toCity{
						margin-top: 20rpx;
						font-size: 35rpx;
					}
				}
				.mainRight{
					float: right;
					position: relative;
					boeder:none;
					width: 240rpx;
					margin-right: 50rpx;
					.left{
						display: inline-block;
						position: absolute;
						height: 70rpx;
						width: 70rpx;
						left: 70rpx;
						boeder:none;
						margin-top: 15rpx;
						background-color: #eee;
						border-radius: 50%;
					}
					.btn{
						position: absolute;
						right: 70rpx;
						width: 60rpx;
						text-align: center;
						height: 70rpx;
						background-color: #eee;
						border: 0px solid red;
						color: #19BE6B;
						overflow: hidden;
						margin-top: 15rpx;
						.phone{
							margin-top: 10rpx;
						}
					}
					.right{
						display: inline-block;
						position: absolute;
						margin-top: 15rpx;
						height: 70rpx;
						width: 70rpx;
						right: 35rpx;
						boeder:none;
						background-color: #eee;
						border-radius: 50%;
					}
				}
			}
			.bottom{
				font-size: 26rpx;
				color: #bbb;

			}
		}
	}
	.modal{
		.slot-content{
			height: 600rpx;
			width: 300rpx;
		}
	}
</style>
